<% if @refunds.any? %>
  <div class="card mb-4">
    <div class="card-header d-flex align-items-center">
      <h6 class="card-title">
        <%= icon('credit-card-refund', class: 'mr-2') %>
        <%= Spree.t(:refunds) %>
      </h6>
      <span class="badge badge-info ml-2"><%= @refunds.count %></span>
    </div>
    <div class="card-body p-0">
      <div class="table-responsive">
        <table class="table table-condensed" id='refunds' data-order-id='<%= @order.number %>'>
          <thead>
            <tr data-hook="refunds_header" class="border-bottom">
              <th scope="col"><%= Spree.t(:amount) %></th>
              <th scope="col"><%= Spree.t(:status) %></th>
              <th scope="col"><%= Spree.t(:reason) %></th>
              <th scope="col"><%= "#{Spree.t('date')}/#{Spree.t('time')}" %></th>
              <th scope="col"></th>
            </tr>
          </thead>
          <tbody>
            <% @refunds.each do |refund| %>
              <tr id="<%= spree_dom_id(refund) %>">
                <td class="amount"><%= refund.display_amount %></td>
                <td>
                  <% if refund.transaction_id.present? %>
                    <span class="badge badge-success"><%= icon('check') %><%= Spree.t('state_machine_states.completed') %></span>
                  <% else %>
                    <span class="badge badge-warning"><%= icon('clock') %><%= Spree.t('state_machine_states.pending') %></span>
                  <% end %>
                </td>
                <td><%= truncate(refund.reason.name, length: 100) %></td>
                <td><%= spree_time(refund.created_at) %></td>
                <% if refund.editable? && can?(:edit, refund) %>
                  <td class="actions">
                    <%= link_to_with_icon('edit', Spree.t(:edit), spree.edit_admin_order_payment_refund_path(refund.payment.order, refund.payment, refund), no_text: true, data: { turbo_frame: 'dialog', action: 'dialog#open' }, class: "btn btn-light btn-sm") if can?(:edit, refund) %>
                  </td>
                <% end %>
              </tr>
            <% end %>
          </tbody>
        </table>
      </div>
    </div>
  </div>
<% end %>